<template>
	<view class="box-2">
		<text class="bb1">订单还款审核</text>
		<view class="box6">
			<view class="b2">
				<text style=" font-size: 40rpx;">订单信息</text>
				<view class="bb"></view>
				<view class="bb3"><text><text style="font-weight: bold;">店铺名称:&nbsp;&nbsp;</text>{{ xinxi.shop_name }}</text></view>
				<view class="bb"></view>
				<view class="bb3"><text> <text style="font-weight: bold;">店铺地址:&nbsp;&nbsp;</text>{{ xinxi.address }}</text></view>
				<view class="bb"></view>
				<view class="bb3"><text> <text style="font-weight: bold;">订单编号:&nbsp;&nbsp;</text>{{ xinxi.id }}</text></view>
				<view class="bb"></view>
				<view class="bb3"><text> <text style="font-weight: bold;">应付金额:&nbsp;&nbsp;</text>{{ xinxi.price }}¥</text></view>
				<view class="bb"></view>
				<view class="bb3"><text><text style="font-weight: bold;">实际付金额:&nbsp;&nbsp;</text>{{ xinxi.price }}¥</text></view>
				<view class="bb"></view>
				<view class="bb3">
					<text style="font-weight: bold;">目前状态:&nbsp;&nbsp;</text>
					<text v-show="xinxi.paystate == 1"><text style="color: #60c567;">已通过</text></text>
					<text v-show="xinxi.paystate == 3"><text style="color: #f43d13;">未通过</text></text>
					<text v-show="xinxi.paystate == 2"><text style="color: #f3b516;">待审核</text></text>
				</view>
				
				
				<view class="box6-2" v-if="xinxi.paystate == 2">
					<button class=" button popup-success" @click="isLeave()"><text
							class="button-text success-text">同意</text></button>
					<view class="container">
						<button @click="showPopup" class="popup-error"><text
								class="button-text error-text">驳回</text></button>
					
					</view>
				</view>
				<view v-else></view>
			</view>
		</view>

		<!-- <tabBar></tabBar> -->
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		http
	} from '../../../until/request';
	import tabBar from '../../../components/tabBar/tabBar.vue';
	import Popup from '../../../components/Popup/Popup.vue';

	onLoad((event) => {
		//清除
		xinxi.value = {};
		console.log("777777777777777777");
		console.log(event.id);

		findbyname(event.id);
	});

	const shopname = ref("");

	const isPopupVisible = ref(false);

	const value = ref("");



	const closePopup = () => {
		isPopupVisible.value = false;
	};

	const handleConfirm =  () => {
		console.log('确认内容：', value.value);
		// 在这里可以添加其他逻辑，比如提交数据
		try {
			console.log(xinxi.value.auditId)
			let audit={
				auditId:xinxi.value.auditId,
				reviewStatus:2,
				cause:value.value
			}
			console.log(audit)
			upshenhe(audit); // 2 表示未通过
			closePopup();
			uni.showToast({
				title: '审核驳回',
				icon: 'none'
			});

			// 使用 setTimeout 来延迟执行页面跳转
			setTimeout(() => {
				uni.navigateTo({
					url: '/pages/supplier/djshenhe/shenhe'
				});
			}, 1300); // 1300 毫秒即 1.3 秒
		} catch (error) {
			console.error('审核驳回失败:', error);
			uni.showToast({
				title: '审核驳回失败',
				icon: 'none'
			});
		}
	};

	const input = (e) => {
		console.log('输入内容：', e);
	};

	const xinxi = ref({});

	const findbyname = async (id) => {
		console.log("往后端传的订单编号");
		console.log(id);
		try {
			const res = await http({
				url: '/audit/selectauditdd/' + id, // 修改为后端接口地址
				method: 'get'
			});

			xinxi.value = res.data; // 假设后端返回的数据在data字段中
			console.log("端返回的数据在");
			console.log(xinxi.value);
		} catch (error) {
			console.error('获取商户信息失败:', error);
			uni.showToast({
				title: '获取商户信息失败',
				icon: 'none'
			});
		}
	};
	

	const showPopup = async () => {
		await nn(); // 1 表示已通过
	
		uni.showToast({
			title: '审核不通过',
			icon: 'success'
		});
	
		// 使用 setTimeout 来延迟执行页面跳转
		setTimeout(() => {
			uni.navigateTo({
				url: '/pages/supplier/djshenhe/shenhehuankuan'
			});
		}, 1300); // 1300 毫秒即 1.3 秒
	};

		//点击同意请求
	const yy = async () => {
		const res = await http({
			url: "/audit/updateAuditStatus/" + xinxi.value.id,
			method: 'get'
		});
	};
	
	//点击同意请求
	const nn = async () => {
		const res = await http({
			url: "/audit/updateAuditStatusToReject/" + xinxi.value.id,
			method: 'get'
		});
	};
	
	
	const upshenhe =async(auditid)=>{
		const res = await http({
			url:'/audit/reject',
			method:'post',
			data:auditid
		}) 
		console.log(res)
	}

	const isLeave = async () => {
		await yy(); // 1 表示已通过

		uni.showToast({
			title: '审核通过',
			icon: 'success'
		});

		// 使用 setTimeout 来延迟执行页面跳转
		setTimeout(() => {
			uni.navigateTo({
				url: '/pages/supplier/djshenhe/shenhehuankuan'
			});
		}, 1300); // 1300 毫秒即 1.3 秒
	};
</script>
<style lang="scss" scoped>
	.container {
		// border: 1px solid red;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.popup-content {
		background-color: white;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		width: 300px;
	}

	.buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
	}

	.confirm-button,
	.close-button {
		font-size: 15px;
		width: 130rpx;
		height: 80rpx;
		border: none;
		border-radius: 5px;
		cursor: pointer;
	}

	.confirm-button {

		background-color: #e1f3d8;
		color: #09bb07;
	}

	.close-button {
		background-color: #fde2e2;
		color: #f56c6c;
	}

	@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	@mixin height {
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
	}

	.bb {
		height: 30rpx;
	}

	.box {
		@include flex;
	}

	.box-2-1 {
		height: 30rpx;
	}

	.button {
		@include flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 35px;

		margin: 0 5px;
		border-radius: 5px;
	}

	.example-body {
		background-color: #fff;
		padding: 10px 0;
	}

	.button-text {
		color: #fff;
		font-size: 12px;
	}


	.popup-height {
		@include height;
		width: 200px;
	}

	.text {
		font-size: 12px;
		color: #333;
	}

	.popup-success {
		width: 130rpx;
		height: 60rpx;
		margin-top: 40rpx;
		margin-left: 60rpx;
		
		border-radius: 10rpx;
		background: linear-gradient(to right, #90EE90,#90EE90);
		color: white;
		font-size: 35rpx;
		box-shadow: 2rpx 2rpx 6rpx rgba(0, 0, 0, 0.2);
		box-shadow: inset 0 -2rpx 0 rgba(0, 0, 0, 0.1), 2rpx 2rpx 6rpx rgba(0, 0, 0, 0.2);
		text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.2);
		transition: background 0.3s ease, transform 0.3s ease;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		&:hover {
			transform: scale(1.05);
			background: linear-gradient(to right,#90EE90,#90EE90);
		}
		
		&:active {
			transform: scale(0.95);
			background:	#90EE90;
		}
	}

	.popup-error {
		width: 130rpx;
		height: 60rpx;
		display: flex;
		margin-top: -57rpx;
		margin-left: 500rpx;
		
		border-radius: 10rpx;
		background: linear-gradient(to right, red, red);
		color: white;
		font-size: 35rpx;
		box-shadow: 2rpx 2rpx 6rpx rgba(0, 0, 0, 0.2);
		box-shadow: inset 0 -2rpx 0 rgba(0, 0, 0, 0.1), 2rpx 2rpx 6rpx rgba(0, 0, 0, 0.2);
		text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.2);
		transition: background 0.3s ease, transform 0.3s ease;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		&:hover {
			transform: scale(1.05);
			background: linear-gradient(to right, red,red);
		}
		
		&:active {
			transform: scale(0.95);
			background:red;
		}
		
	}

	.popup-info {
		color: #fff;
		background-color: #f2f6fc;
	}

	.success-text {
		color: #F8F8FF;

	}

	.warn-text {
		color: #e6a23c;
	}

	.error-text {
		color: white;
	}

	.box6-3 {
		border: 1px solid gainsboro;
		//margin: 10rpx;
		padding: 10rpx;
		margin-top: 10rpx;
		/* box6是具体信息项的容器 */
		display: flex;
		/* 使用Flex布局 */
		flex-direction: column;
		/* 垂直排列 */
		align-items: flex-start;
		/* 文本左对齐 */

	}

	.box-2 {
		margin-left: 20rpx;
		width: 750rpx;
		height: 100rpx;

		.bb1 {
			width: 710rpx;

			font-size: 45rpx;
			font-weight: 600;
			display: flex;
			padding-top: 15rpx;
			justify-content: center;
			// background-color: dodgerblue;
			height: 90rpx;
		}

		.box6 {
			/* 假设box3是外层容器，这里可以根据需要设置背景、边距等 */
			background-color: #f8f8f8;
			/* 浅灰色背景 */
			padding: 10px;
			/* 内边距 */
			border-radius: 8px;
			/* 圆角边框 */
			margin-bottom: 20px;
			/* 底部外边距 */
			/* box4可能是一个包裹信息的容器 */
			background-color: #fff;
			/* 白色背景 */
			padding: 15px;
			/* 内边距 */
			border-radius: 5px;
			/* 圆角边框 */
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			/* 轻微的阴影效果 */
			width: 680rpx;
			border: 1px solid gainsboro;
			//margin: 10rpx;
			padding: 10rpx;
			margin-top: 10rpx;
			/* box6是具体信息项的容器 */
			display: flex;
			/* 使用Flex布局 */
			flex-direction: column;
			/* 垂直排列 */
			align-items: flex-start;
			/* 文本左对齐 */
			//border: 1px solid #56b6ec;
			box-shadow: 8px 5px 5px rgba(117, 160, 208, 0.3);
		}

		.bb3 {
			font-size: 30rpx;
			// font-weight: 600;
			// color: grey;
		}

	}
</style>